<template>
  <div>
    <h4>Parent Component</h4>
    <p>Car Name: {{ car.name }}</p>
    <p>Car Color: {{ car.color }}</p>
    <p>Car Year: {{ car.year }}</p>
    <p>Car Price: {{ car.price }}</p>
  </div>
  <Child1 v-bind="car" />
  <Child2 v-bind="car" />
</template>

<script lang='ts' setup>
import { onUnmounted, reactive } from 'vue';
import Child1 from './Child1.vue';
import Child2 from './Child2.vue';
import emitter from '@/utils/emitter';

const car = reactive({
  name: 'BMW',
  color: 'red',
  year: 2021,
  price: 100000
});

//订阅事件
emitter.on('change-price', (newPrice: any) => {
  car.price = newPrice;
});

onUnmounted(() => {
  emitter.off('change-price');
});

</script>

<style scoped lang='scss'></style>
